<template>
  <el-form-item v-if="!hideFeilds.find(item=>item==field.options.prop)" v-show="!field.options.hidden" :prop="field.options.prop" :readonly="field.options.readonly" :required="field.options.required" :rules="changeRules(field)" :label-width="field.options['label-width']!=null?field.options['label-width']+'px':null" :class="{'no-margin':field.options.noMargin}" class="input-container">
    <template slot="label">
      <slot :name="'label-' + field.options.prop" :formData="formData" :label="field.label">
        {{ (field.options.noLabel?null:field.label) }}
      </slot>
    </template>
    <!--单行分组-->
    <template v-if="field.type=='inline-group'">
      <template v-for="subField in field.fields">
        <el-input v-if="subField.type=='input'" :ref="'input-'+subField.options.prop" :key="subField.key" v-model="formData[subField.options.prop]" v-bind="subField.options" :style="{width:subField.options.width}" class="inline-input" @blur="(event)=>{onBlur($refs['input-' + subField.options.prop][0], formData[subField.options.prop], event, subField)}" @focus="(event)=>{onFocus($refs['input-' + subField.options.prop][0], formData[subField.options.prop], event, subField)}"></el-input>

        <el-cascader v-else-if="subField.type=='cascader'" :key="subField.key" v-model="formData[subField.options.prop]" :options="subField.options" :style="{width:subField.options.width}" class="inline-input" change-on-select @focus="(event)=>{onFocus($refs['cascader-' + subField.options.prop][0], formData[subField.options.prop], event, subField);}" @change="(val)=>{change($refs['cascader-' + subField.options.prop], val, event, subField);}"></el-cascader>

        <!--下拉框选择器-->
        <template v-else-if="subField.type=='select'">
          <el-select v-if="subField.options.keyProp" :ref="'select-'+subField.options.prop" :key="subField.key" v-model="formData[subField.options.keyProp]" :style="{width:subField.options.width}" :field="subField" :disabled="subField.options.disabled" :multiple="subField.options.multiple" :filterable="!!subField.options.filterable" :clearable="!!subField.options.clearable" class="inline-input" @change="(val)=>{change($refs['select-' + subField.options.prop][0], val, subField);}">
            <el-option v-for="(item, index) in getOptions(subField)" :key="index" v-bind="item" :label="item.label" :value="item.value" :option="item">
            </el-option>
          </el-select>
          <el-select v-else :ref="'select-'+subField.options.prop" :key="subField.key" v-model="formData[subField.options.prop]" :style="{width:subField.options.width}" :field="subField" :disabled="subField.options.disabled" :multiple="subField.options.multiple" :filterable="!!subField.options.filterable" :clearable="!!subField.options.clearable" class="inline-input" @change="(val)=>{change($refs['select-' + subField.options.prop][0], val, subField);}">
            <el-option v-for="(item, index) in getOptions(subField)" :key="index" v-bind="item" :label="item.label" :value="item.value" :option="item">
            </el-option>
          </el-select>
        </template>

        <template v-else-if="subField.type === 'time'">
          <el-time-picker :key="subField.key" v-model="formData[subField.options.prop]" :is-range="subField.options.isRange" :placeholder="subField.options.placeholder" :start-placeholder="subField.options.startPlaceholder" :end-placeholder="subField.options.endPlaceholder" :readonly="subField.options.readonly" :disabled="subField.options.disabled" :editable="subField.options.editable" :clearable="subField.options.clearable" :arrow-control="subField.options.arrowControl" :style="{width: subField.options.width}">
          </el-time-picker>
        </template>

        <template v-else-if="subField.type === 'date'">
          <el-date-picker :key="subField.key" v-model="formData[subField.options.prop]" :type="subField.options.type" :is-range="subField.options.isRange" :placeholder="subField.options.placeholder" :start-placeholder="subField.options.startPlaceholder" :end-placeholder="subField.options.endPlaceholder" :readonly="subField.options.readonly" :disabled="subField.options.disabled" :editable="subField.options.editable" :clearable="subField.options.clearable" :format="changeFormat(field.options.formatter)" :value-format="changeFormat(field.options.formatter)" :style="{width: subField.options.width}">
          </el-date-picker>
        </template>

        <!-- 单选组 -->
        <el-radio-group v-else-if="subField.type=='radio'" :key="subField.key" v-model="formData[subField.options.prop]" :style="{display: subField.options.inline ? 'inline-block' : 'block'}" class="margin-right-10">
          <!-- 静态数据 -->
          <template v-if="subField.options.remote === false">
            <el-radio v-for="(item, optionIndex) in subField.options.options" :key="subField.key + '_ops_' + optionIndex" :label="item.value">{{ item.label }}</el-radio>
          </template>
          <!-- 远程动态函数 -->
          <template v-else-if="subField.options.remote === true">
          </template>
          <!-- 下拉框绑定 -->
          <template v-else-if="subField.options.remote === 'bindDropdown'">
            <el-radio v-for="(item, optionIndex) in getOptions(subField)" :key="subField.key + '_ops_' + optionIndex" :label="item.value">{{ item.label }}</el-radio>
          </template>
        </el-radio-group>

        <!-- 复选组 -->
        <el-checkbox-group v-else-if="subField.type=='checkbox'" :ref="'checkbox-' + subField.options.prop" :key="subField.key" v-model="formData[subField.options.prop]" @change="(val)=>{change($refs['checkbox-' + subField.options.prop], val, subField);}">
          <!-- 静态数据 -->
          <template v-if="subField.options.remote === false">
            <el-checkbox v-for="(item, optionIndex) in subField.options.options" :key="subField.key + '_ops_' + optionIndex" :label="item.value">{{ item.label }}</el-checkbox>
          </template>
          <!-- 远程动态函数 -->
          <template v-else-if="subField.options.remote === true">
          </template>
          <!-- 下拉框绑定 -->
          <template v-else-if="subField.options.remote === 'bindDropdown'">
            <el-checkbox v-for="(item, optionIndex) in getOptions(subField)" :key="subField.key + '_ops_' + optionIndex" :label="item.value">{{ item.label }}</el-checkbox>
          </template>
        </el-checkbox-group>

        <!--空白-->
        <template v-else-if="subField.type=='blank'">
          <slot :name="'blank-' + subField.options.prop" :formData="formData"></slot>
        </template>
      </template>
    </template>
    <!--独立行-->
    <template v-else>
      <template v-if="'input,textarea'.indexOf(field.type)>=0">
        <el-input v-if="['int','int32', 'int64'].indexOf(field.options.dataType)>=0" :ref="'input-'+field.options.prop" v-model.number="formData[field.options.prop]" v-bind="field.options" :type="field.type" :style="{width: field.options.width||'auto'}" clearable @blur="(event)=>{onBlur($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}" @focus="(event)=>{onFocus($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}" @change="(val)=>{change($refs['input-' + field.options.prop], val, field);}"></el-input>
        <el-input v-else-if="['decimal'].indexOf(field.options.dataType)>=0" :ref="'input-'+field.options.prop" v-model="formData[field.options.prop]" v-bind="field.options" :style="{width: field.options.width||'auto'}" type="number" @blur="(event)=>{onBlur($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}" @focus="(event)=>{onFocus($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}" @change="(val)=>{change($refs['input-' + field.options.prop], val, field);}" @keyup.native="(event)=>{onKeyup($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}"></el-input>
        <el-input v-else :ref="'input-'+field.options.prop" v-model="formData[field.options.prop]" v-bind="field.options" :type="field.type" :style="{width: field.options.width||'auto'}" clearable @blur="(event)=>{onBlur($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}" @focus="(event)=>{onFocus($refs['input-' + field.options.prop], formData[field.options.prop], event, field)}" @change="(val)=>{change($refs['input-' + field.options.prop], val, field);}"></el-input>
      </template>
      <!--下拉框选择器-->
      <template v-else-if="field.type=='select'">
        <!--有关联主键字段-->
        <el-select v-if="field.options.keyProp" :ref="'select-'+field.options.prop" :key="field.key" v-model="formData[field.options.keyProp]" :style="{width:field.options.width}" :field="field" :disabled="field.options.disabled" :multiple="field.options.multiple" :filterable="!!field.options.filterable" :clearable="!!field.options.clearable" class="inline-input" @change="(val)=>{change($refs['select-' + field.options.prop], val, field);}">
          <el-option v-for="(item, index) in getOptions(field)" :key="index" v-bind="item" :label="item.label" :value="item.value" :option="item">
          </el-option>
        </el-select>
        <!--无关联主键字段-->
        <el-select v-else :ref="'select-'+field.options.prop" :key="field.key" v-model="formData[field.options.prop]" :style="{width:field.options.width}" :field="field" :disabled="field.options.disabled" :multiple="field.options.multiple" :filterable="!!field.options.filterable" :clearable="!!field.options.clearable" :allow-create="!!field.options.allowCreate" class="inline-input" @change="(val)=>{change($refs['select-' + field.options.prop], val, field);}">
          <el-option v-for="(item, index) in getOptions(field)" :key="index" v-bind="item" :label="item.label" :value="item.value" :option="item">
          </el-option>
        </el-select>
      </template>

      <!-- 级联 -->
      <el-cascader v-else-if="field.type=='cascader'" :ref="'cascader-' + field.options.prop" v-model="formData[field.options.prop]" :options="field.options.options" :placeholder="field.options.placeholder" :style="{width: field.options.width}" :rules="field.rules" :field="field" filterable change-on-select @focus="(event)=>{onFocus($refs['cascader-' + field.options.prop][0], formData[field.options.prop], event, field);}" @change="(val)=>{change($refs['cascader-' + field.options.prop], val, field);}"></el-cascader>

      <!-- 单选组 -->
      <el-radio-group v-else-if="field.type=='radio'" :ref="'radio-' + field.options.prop" :key="field.key" v-model="formData[field.options.prop]" @change="(val)=>{change($refs['radio-' + field.options.prop], val, field);}">
        <!-- 静态数据 -->
        <template v-if="field.options.remote === false">
          <el-radio v-for="(item, optionIndex) in field.options.options" :key="field.key + '_ops_' + optionIndex" :value="item.value" :label="item.label" :style="{display: (field.options.inline ? 'inline-block' : 'block'),'margin-bottom':(field.options.inline?0:'15px')}">{{ item.label }}</el-radio>
        </template>
        <!-- 远程动态函数 -->
        <template v-else-if="field.options.remote === true">
        </template>
        <!-- 下拉框绑定 -->
        <template v-else-if="field.options.remote === 'bindDropdown'">
          <el-radio v-for="(item, optionIndex) in getOptions(field)" :key="field.key + '_ops_' + optionIndex" :value="item.value" :label="item.label" :style="{display: field.options.inline ? 'inline-block' : 'block'}">{{ item.label }}</el-radio>
        </template>
      </el-radio-group>

      <!-- 复选组 -->
      <el-checkbox-group v-else-if="field.type=='checkbox'" :ref="'checkbox-' + field.options.prop" :key="field.key" v-model="formData[field.options.prop]" @change="(val)=>{change($refs['checkbox-' + field.options.prop], val, field);}">
        <!-- 静态数据 -->
        <template v-if="field.options.remote === false">
          <el-checkbox v-for="(item, optionIndex) in field.options.options" :key="field.key + '_ops_' + optionIndex" :label="item.value">{{ item.label }}</el-checkbox>
        </template>
        <!-- 远程动态函数 -->
        <template v-else-if="field.options.remote === true">
        </template>
        <!-- 下拉框绑定 -->
        <template v-else-if="field.options.remote === 'bindDropdown'">
          <el-checkbox v-for="(item, optionIndex) in getOptions(field)" :key="field.key + '_ops_' + optionIndex" :label="item.value">{{ item.label }}</el-checkbox>
        </template>
      </el-checkbox-group>
      <!-- 开关 -->
      <el-switch v-else-if="field.type=='switch'" :ref="'radio-' + field.options.prop" :key="field.key" v-model.number="formData[field.options.prop]" v-bind="field.options" @change="(val)=>{change($refs['radio-' + field.options.prop], val, field);}">
      </el-switch>

      <!-- 树选择框 -->
      <template v-else-if="field.type === 'tree'">
        <tree-select v-model="formData[field.options.prop]" :options="field.options" :label="field.label" :tree-load="(node, resolve)=>{treeLoad(node, resolve, field)}" :disabled="currentDisabled" :node-key-value="getNodeKeyValue(field)" @onFocus="(ref, val, event)=>{onFocus(ref, val, event, field);}" @on-change="(ref, val)=>{change(ref, val, field);}" @on-tree-node-click="(data, node, el, labels, values)=>{onTreeNodeClick(data, node, el, labels, values, field)}">
        </tree-select>
      </template>

      <!-- 输入选择框 -->
      <template v-else-if="field.type === 'input-select'">
        <input-select v-model="formData[field.options.prop]" :options="getInputSelectOptions(field).options" :props="inputSelectProps(field)" :label="field.label" :disabled="currentDisabled || getInputSelectOptions(field).disabled" :input-width="getInputSelectOptions(field).width" :placeholder="getInputSelectOptions(field).placeholder" @on-focus="(ref, val, event)=>{onFocus(ref, val, event, field);}" @on-item-click="(ref, val, itemData)=>{itemClick(ref, val, itemData, field);}" @on-change="(ref, val)=>{change(ref, val, field);}" @on-key-down="(ref, val, e)=>onKeyDown(ref, val, e, field)" @on-key-up="(ref, val, event, selectedRow) => {onKeyup(ref, val, event, field, selectedRow);}">
        </input-select>
      </template>

      <!-- 表格选择框 -->
      <template v-else-if="field.type === 'table-select'">
        <table-select v-model="formData[field.options.prop]" :form-data="formData" :field="field" :columns="field.options.columns" :label="field.label" :disabled="currentDisabled || field.options.disabled" :input-width="field.options.width" :placeholder="field.options.placeholder" @on-focus="(ref, val, event)=>{onFocus(ref, val, event, field);}" @on-item-click="(ref, val, itemData)=>{itemClick(ref, val, itemData, field);}" @on-change="(ref, val)=>{change(ref, val, field);}" @on-key-up="(ref, val, event, tableData)=>{onKeyup(ref, val, event, field, tableData);}" @on-row-change="(ref, selectedRow) => {onRowChange(ref, selectedRow, field);}" @on-row-click="(ref, selectedRow) => {onRowClick(ref, selectedRow, field);}">
        </table-select>
      </template>

      <template v-else-if="field.type === 'time'">
        <el-time-select v-if="field.options.fixedTimeSelect" v-model="formData[field.options.prop]" :placeholder="field.options.placeholder" :readonly="field.options.readonly" :disabled="field.options.disabled" :editable="field.options.editable" :clearable="field.options.clearable" :style="{width: field.options.width}" :picker-options="{start:field.options.start, end:field.options.end, step:field.options.step}">
        </el-time-select>
        <el-time-picker v-else v-model="formData[field.options.prop]" :is-range="field.options.isRange" :placeholder="field.options.placeholder" :start-placeholder="field.options.startPlaceholder" :end-placeholder="field.options.endPlaceholder" :readonly="field.options.readonly" :disabled="field.options.disabled" :editable="field.options.editable" :clearable="field.options.clearable" :arrow-control="field.options.arrowControl" :style="{width: field.options.width}">
        </el-time-picker>
      </template>

      <template v-else-if="['date', 'datetime'].indexOf(field.type)>=0">
        <el-date-picker :ref="'date-' + field.options.prop" v-model="formData[field.options.prop]" :type="field.options.type" :is-range="field.options.isRange" :placeholder="field.options.placeholder" :start-placeholder="field.options.startPlaceholder" :end-placeholder="field.options.endPlaceholder" :readonly="field.options.readonly" :disabled="field.options.disabled" :editable="field.options.editable" :clearable="field.options.clearable" :format="changeFormat(field.options.formatter)" :value-format="changeFormat(field.options.formatter)" :style="{width: field.options.width}" @change="(val)=>{change($refs['date-' + field.options.prop], val, field);}">
        </el-date-picker>
      </template>

      <!--上传图片-->
      <template v-else-if="field.type=='upload-image'">
        <el-upload :ref="'upload-' + field.options.prop" :http-request="({file})=>{uploadHttp(file, field, formData, $refs['date-' + field.options.prop])}" :before-upload="(file)=>beforeAvatarUpload(file, field)" :multiple="field.options.multiple" :on-remove="handlePicRemove" :disabled="field.options.disabled" :on-change="(file, fileList)=>{handlePicChange(file, fileList)}" :file-list="picList" :list-type="field.options.listType" :show-file-list="field.options.listType=='picture-card'" :class="{'hide-button': field.options.readonly}" action="">
          <i v-if="field.options.listType=='picture-card'" class="el-icon-plus"></i>
          <template v-else>
            <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
            <slot :name="'file-' + field.options.prop" :file-list="picList">
              <div class="margin-top-10">
                <div v-for="(item, index) in picList" :key="index" class="row">
                  <img v-if="isPic(item.url)" :src="item.url+'?x-oss-process=style/100'" width="80px" class="cursor-pointer" @click="handlePicPreview(item, field)" />
                  <a v-else :href="item.url" target="_blank">{{ getFileName(item.url) }}</a>
                  <i class="el-icon-close" @click="fileDelete(item.url, picList)"></i>
                </div>
              </div>
            </slot>
          </template>
        </el-upload>

        <!--预览图片-->
        <el-dialog :visible.sync="dialogPicVisible" :append-to-body="true">
          <img :src="dialogImageUrl" width="100%" alt="">
        </el-dialog>
      </template>

      <!--空白-->
      <template v-if="field.type=='blank'">
        <slot :name="'blank-' + field.options.prop"></slot>
      </template>

      <!--静态文本-->
      <template v-if="field.type=='static'">
        <div :style="{'padding-top':'8px','font-size':field.options.styles.fontSize+'px', 'line-height':field.options.styles.lineHeight+'px'}">
          {{ formData[field.options.prop] }}
        </div>
      </template>

    </template>
  </el-form-item>
</template>

<script>
import TreeSelect from "@/components/base/TreeSelect";
import InputSelect from "@/components/base/InputSelect";
import TableSelect from "@/components/base/TableSelect";

export default {
  name: "yrt-editor-input",
  components: {
    TreeSelect,
    InputSelect,
    TableSelect,
  },
  props: {
    // 字段数据
    field: {
      type: Object,
      required: true,
    },
    // 校验规则
    formData: {
      type: Object,
      required: true,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      required: true,
    },
    // 下拉框值集合
    dropdownData: {
      type: Object,
      required: true,
    },
    // 校验规则
    rules: {
      type: Object,
      default: () => {
        return null;
      },
    },
    // 隐藏字段
    hideFeilds: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      dialogImageUrl: null,
      dialogPicVisible: false,
      BASE_API: process.env.BASE_API,
    };
  },

  computed: {
    // 是否禁用
    currentDisabled: {
      get: function () {
        return this.disabled;
      },
      set: function (newValue) {
        this.$emit("update:disabled", newValue); // 双向绑定prop.action，通知父级组件变量值同步更新
      },
    },
    // 获得下拉框options
    getOptions: {
      get: function () {
        var the = this;
        return function (field) {
          if (field.options.remote === "bindDropdown") {
            field.options.options =
              the.dropdownData["dropdown" + field.options.dropdown_Id];
          }
          return field.options.options;
        };
      },
    },
    // 获得输入选择框options
    getInputSelectOptions: {
      get: function () {
        var the = this;
        return function (field) {
          if (field.options.remote === "bindDropdown") {
            field.options.options =
              the.dropdownData["dropdown" + field.options.dropdown_Id];
          }
          return field.options;
        };
      },
    },
    // 图片列表
    picList: {
      get: function () {
        var values = this.formData[this.field.options.prop];
        var valueList = [];
        if (Array.isArray(values)) {
          valueList = values;
        } else {
          valueList = values ? values.split(",") : [];
        }

        return valueList.map((item) => {
          const f = item.split("/");
          const name = decodeURI(f[f.length - 1]).substr(37);
          return {
            name: name,
            url: item,
          };
        });
      },
      set: function (val) {
        this.formData[this.field.options.prop] = val
          .map((item) => item.url)
          .join(",");
      },
    },
  },
  watch: {
    formData: {
      handler: function () {
        if (this.$refs.tinymce) {
          if (this.formData) {
            const val = this.formData[this.field.options.prop];
            this.$refs.tinymce.setContent(val || "");
          }
        }
      },
      deep: true,
    },
  },
  created() {
    this.loadCascaderData();
  },
  mounted() {},
  destroyed() {},
  methods: {
    // 初始化
    init() {
      if (this.$refs.tinymce) {
        this.$refs.tinymce.initTinymce();
      }
    },
    // 字段change事件
    change(ref, val, field) {
      if (["decimal"].indexOf(field.options.dataType) >= 0) {
        this.formData[field.options.prop] = Number(val);
      }
      if (field.type === "select") {
        // 设置表单数据
        if (!Array.isArray(val)) {
          const itemOption = ref.getOption(val).$attrs.option;
          Object.keys(itemOption).forEach((key, index) => {
            if (["value", "label"].indexOf(key) < 0) {
              this.$set(this.formData, key, itemOption[key]);
            }
          });
        } else {
          const values = [];
          const names = [];
          let prop = field.options.prop;
          let keyProp = field.options.keyProp;
          if (keyProp) {
            for (const item of val) {
              if (prop.charAt(prop.length - 1) === "s") {
                prop = prop.substr(0, prop.length - 1);
              }
              if (keyProp.charAt(keyProp.length - 1) === "s") {
                keyProp = keyProp.substr(0, keyProp.length - 1);
              }
              const opts = ref.getOption(item);
              if (opts && opts.$attrs) {
                const itemOption = opts.$attrs.option;
                const v = itemOption[keyProp] || itemOption.value;
                const n = itemOption[prop] || itemOption.label;
                values.push(v);
                names.push(n);
              }
            }
            this.formData[field.options.keyProp] = values;
            this.formData[field.options.prop] = names;
          } else {
            for (const item of val) {
              if (prop.charAt(prop.length - 1) === "s") {
                prop = prop.substr(0, prop.length - 1);
              }
              const opts = ref.getOption(item);
              if (opts.$attrs) {
                const itemOption = opts.$attrs.option;
                const v = itemOption[prop] || itemOption.value;
                values.push(v);
              }
            }
            this.formData[field.options.prop] = values;
          }
        }
      } else if (field.type === "checkbox") {
        // this.$set(this.formData, key, itemOption[key]);
      }
      this.$emit("on-change", ref, val, field, this.formData);
    },
    // input-select item click event
    itemClick(ref, val, itemData, field) {
      this.$emit("on-item-click", ref, val, itemData, field, this.formData);
    },
    // 树形下拉框获得点击项
    onTreeNodeClick(data, node, el, labels, values, field) {
      var the = this;
      // 仅选择叶节点
      if (!node.isLeaf && field.options.onlySelectLeaf) return;

      var key = field.options.prop;
      // 将下拉框中的值赋给表单
      if (Object.keys(data).findIndex((item) => item === key) >= 0) {
        Object.keys(data).forEach((key, index) => {
          if (
            [
              "value",
              "label",
              "hasChild",
              "hasFactChild",
              "state",
              "attributes",
            ].indexOf(key) < 0
          ) {
            the.$set(the.formData, key, data[key]);
          }
        });
      } else {
        the.$set(the.formData, key, data[key]);
      }
      this.$emit("on-tree-node-click", data, node, el, labels, values, field);
    },
    // 加载级联数据
    loadCascaderData() {
      this.$nextTick(() => {
        Object.keys(this.$refs).forEach((refName) => {
          if (refName.indexOf("cascader") >= 0) {
            var ref = this.$refs[refName];
            var field = ref.$attrs["field"];
            this.$emit(
              "on-focus",
              ref,
              this.formData[field.options.prop],
              null,
              field
            );
          }
        });
      });
    },
    // 树形输入框load
    treeLoad(node, resolve, subField) {
      var the = this;
      this.$emit("tree-load", node, resolve, subField);
      // 默认加载数据
      if (!subField.isLoaded) {
        var keyName = subField.ajaxParams.keyName;
        if (!keyName) {
          the.$message.error("未设置tree下拉框ajax加载参数！");
          return;
        }
        // the.$nextTick(() => {
        //   var where = "";
        //   var userInfo = this.common.getUserInfo();
        //   if (node.level === 0) {
        //     where = {
        //       userProduct_Id: userInfo.userProduct_Id,
        //       parentId: 0,
        //     };
        //   } else {
        //     where = {
        //       userProduct_Id: userInfo.userProduct_Id,
        //       parentId: node.data[subField.ajaxParams.keyName],
        //     };
        //   }

        //   var url = "/api/common/loadTreeNode";
        //   var params = subField.ajaxParams;
        //   params.where = where;
        //   the.common.ajax(
        //     url,
        //     params,
        //     (res) => {
        //       if (res.result) {
        //         resolve(res.data);
        //       } else {
        //         the.$message.error(res.msg);
        //       }
        //     },
        //     true
        //   );
        // });
      }
    },
    // tree当前Key Value
    getNodeKeyValue(field) {
      if (field.options.keyProp) {
        return this.formData[field.options.keyProp];
      } else {
        return this.formData[field.options.prop];
      }
    },
    // 图片删除
    handlePicRemove(file, fileList) {
      var urlList = fileList.map((item) => {
        return item.response ? item.response.Data.Url : item.url;
      });
      this.formData[this.field.options.prop] = urlList.join(",");
    },
    // 预览图片
    handlePicPreview(file, field) {
      if (this.isPic(file.url)) {
        this.dialogImageUrl = file.url;
        this.dialogPicVisible = true;
      } else {
        window.open(file.url);
      }
    },
    // 上传图片change事件
    handlePicChange(file, fileList) {
      var status = "success";
      fileList.forEach((item) => {
        if (item.status === "ready") {
          status = item.status;
        }
      });
      if (status === "ready") return;

      var urlList = fileList.map((item) => {
        var url = item.response ? item.response.Data.Url : item.url;
        url = url.replace(this.BASE_API, "");
        return url;
      });
      this.formData[this.field.options.prop] = urlList.join(",");
    },
    // 失去焦点事件
    onBlur(ref, val, event, field) {
      this.$emit("on-blur", ref, val, event, field);
    },
    // 获得焦点
    onFocus(ref, val, event, field) {
      this.$emit("on-focus", ref, val, event, field);
    },
    // 按键抬起
    onKeyup(ref, val, event, field, tableData) {
      // if (["decimal"].indexOf(field.options.dataType) >= 0) {
      //   this.formData[field.options.prop] = Number(val);
      // }
      this.$emit("on-key-up", ref, val, event, field, tableData);
    },
    // 按键抬起
    onKeyDown(ref, val, event, field, tableData) {
      this.$emit("on-key-down", ref, val, event, field, tableData);
    },
    // 获得tableSelect行改变
    onRowChange(ref, selectedRow, field) {
      this.$emit("on-row-change", ref, selectedRow, field);
    },
    // 获得tableSelect行单击事件
    onRowClick(ref, selectedRow, field) {
      this.$emit("on-row-click", ref, selectedRow, field);
    },
    // 转换验证规则
    changeRules(field) {
      if (this.rules && this.rules[field.options.prop]) {
        return this.rules[field.options.prop];
      }
      return field.rules;
    },
    // 阿里云图片上传
    uploadHttp(file, field, formData, ref) {
      // 定义唯一的文件名
      const contentType = file.type;
      const name = file.name;
      const fileName = `wms/file/${this.common.formatDate(
        new Date(),
        "YYYY-MM-DD"
      )}/${this.common.getGUID()}-${name}`;
      // ossClient(this.common.uploadConf)
      //   .put(fileName, file, {
      //     ContentType: contentType
      //   })
      //   .then(({ res, url, name }) => {
      //     if (res && res.status === 200) {
      //       const url = res.requestUrls[0];
      //       const list = this.picList;
      //       const f = url.split("/");
      //       const name = decodeURI(f[f.length - 1]).substr(37);
      //       list.push({
      //         name: name,
      //         url: url
      //       });
      //       this.picList = list;
      //       this.$emit("on-upload-after", ref, file, field, formData);
      //     }
      //   })
      //   .catch(err => {
      //     this.$message.error(`上传图片失败` + err.message);
      //   });
    },
    /**
     * 图片限制
     */
    beforeAvatarUpload(file, field) {
      if (!field.options.multiple) {
        if (this.picList.length >= 1) {
          this.$message.error("已存在文件，请先删除然后重新上传");
          return false;
        }
      }
      if (field.options.listType === "text") {
        const names = file.name.split(".");
        let extName = names[names.length - 1];
        extName = extName.toLocaleLowerCase();
        const isLt5MB = file.size / 1024 / 1024 < 5;
        const type = [
          "jpeg",
          "jpg",
          "png",
          "xls",
          "xlsx",
          "doc",
          "docx",
          "pdf",
          "PDF",
        ];
        if (type.indexOf(extName) < 0) {
          this.$message.error(`只能上传${type.join(",")}文件!`);
        }
        if (!isLt5MB) {
          this.$message.error("大小不能超过 5MB!");
        }
        return type.indexOf(extName) >= 0 && isLt5MB;
      } else {
        const names = file.name.split(".");
        let extName = names[names.length - 1];
        extName = extName.toLocaleLowerCase();
        const isLt5MB = file.size / 1024 / 1024 < 5;
        const type = ["jpeg", "jpg", "png"];
        if (type.indexOf(extName) < 0) {
          this.$message.error("上传图片只能是 JPEG/JPG/PNG 格式!");
        }
        if (!isLt5MB) {
          this.$message.error("单张图片大小不能超过 5MB!");
        }
        return type.indexOf(extName) >= 0 && isLt5MB;
      }
    },
    // input-select props参数
    inputSelectProps(col) {
      let props = {
        label: "label",
        value: "value",
      };
      if (col.options && col.options.labelField && col.options.valueField) {
        props = {
          label: col.options.labelField,
          value: col.options.valueField,
        };
      }

      return props;
    },
    // moment日期格式符转换为element日期格式符转换
    changeFormat(formatter) {
      if (formatter) {
        formatter = formatter.replace("YYYY", "yyyy");
        formatter = formatter.replace("-DD", "-dd");
      }
    },
    // 判断是否为图片
    isPic(url) {
      if (!url) return false;

      const names = url.split(".");
      let extName = names[names.length - 1];
      extName = extName.toLocaleLowerCase();
      const isExist =
        ["jpg", "jpeg", "png", "bmp", "gif"].indexOf(extName) >= 0;
      return isExist;
    },
    // 获取文件名
    getFileName(url) {
      if (!url) return false;
      url = decodeURIComponent(url);
      const u = url.split("/");
      const atr = u[u.length - 1];
      if (atr.length > 38) {
        return atr.substr(37, atr.length - 1);
      } else {
        return atr;
      }
    },
    // 附件删除
    fileDelete(url, fileList) {
      this.$confirm("确定要永久删除此文件吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const params = {
            url,
          };
          this.common.ajax(
            "/api/sys/alioss/delete",
            params,
            (res) => {
              debugger;
              this.common.showMsg(res);
              const urlList = fileList.map((item) => item.url);
              const index = urlList.findIndex((item) => item === url);
              urlList.splice(index, 1);
              this.formData[this.field.options.prop] = urlList.join(",");
            },
            true
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.input-container {
  .inline-input {
    & + .inline-input {
      margin-left: 10px;
    }
  }

  div.el-input:not(.no-bg) {
    ::v-deep input.el-input__inner[readonly] {
      background-color: #f5f7fa;
      cursor: not-allowed;
    }
  }
  ::v-deep .el-select,
  ::v-deep .el-cascader {
    width: 100%;
    input.el-input__inner[readonly] {
      background-color: white;
      cursor: pointer;
    }
  }
  ::v-deep .el-upload--picture-card {
    margin-bottom: 10px;
  }
  ::v-deep .el-upload-list__item {
    -webkit-transition: all 0s cubic-bezier(0.55, 0, 0.1, 1);
    transition: all 0s cubic-bezier(0.55, 0, 0.1, 1);
    width: auto;
    height: auto;
    max-width: 348px;
    min-width: 60px;
    max-height: 148px;
  }
  .hide-button {
    ::v-deep .el-upload--text {
      display: none;
    }
    ::v-deep .el-upload-list__item-status-label {
      display: none;
    }
    ::v-deep .el-upload-list__item:hover .el-icon-close {
      display: none;
    }
  }
}
</style>
